<template>
  <div class="layout-page pb-32px">
    <div class="page-top h-132px">
      <h1 class="w-1328px mx-auto text-white lh-132px font-size-36px">
        消息中心
      </h1>
    </div>
    <div class="layout-page-inner w-95%">
      <el-breadcrumb :separator-icon="ArrowRight" class="my-16px">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>消息中心</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="flex overflow-hidden">
        <div class="w-210px mr-32px flex flex-col text-default">
          <div
              v-for="item in typeList"
              :key="item.name"
              class="relative left-tabs-pane h-48px cursor-pointer flex items-center justify-center border-b-1px border-b-solid border-b-#e5e8ed"
              :class="{ 'is-active': item.name === activeType }"
              @click="leftTabClick(item.name)"
          >
            <h6 class="font-size-16px fw-500 mr-14px">{{ item.label }}</h6>
            <span
                v-show="item.num"
                class="w-20px font-size-12px h-20px lh-20px b-rd-10px bg-#ebebeb text-center"
            >{{ item.num }}</span>

          </div>
        </div>
        <div class="flex-1" v-loading="loading">
          <div class="bg-white mb-16px" v-show="list.length">
            <NoticeCard
                v-for="item in list"
                :key="item.id"
                :data="item"
                class="cursor-pointer"
            />
            <el-pagination
                v-show="list.length"
                class="justify-end"
                :total="total"
                layout="total, sizes, prev, pager, next"
                v-model:current-page="page.pageNum"
                v-model:page-size="page.pageSize"
                :page-sizes="[10, 20, 50, 100]"
            ></el-pagination>
            <Empty v-if="!list.length" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import NoticeCard from "./components/noticeCard.vue";
import { useLoading, usePage } from "@/hooks";
import { useUserStore } from "@/store";

const route = useRoute();
const { loading, setLoading } = useLoading();
const { page, total, resetPage } = usePage();
const $api = inject("$api");
const userStore = useUserStore();

const typeList = computed(() => {
  return [
    {
      label: "通知",
      num: userStore.unreadNum?.notice,
      name: "1",
    },
    {
      label: "公告",
      num: userStore.unreadNum?.inform,
      name: "2",
    },
  ];
});
const activeType = ref(route.query.type || 1);
const leftTabClick = (name) => {
  if (name === activeType.value) return;
  activeType.value = name;
  resetPage();
};

const list = ref([]);
const queryList = async () => {
  setLoading(true);
  try {
    const { data: rows, total: resTotal } = await $api.news.getNoticeList({
      ...page.value,
      noticeType: activeType.value,
    });
    list.value = rows;
    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

watch(
    () => page.value,
    (val) => {
      queryList();
    },
    {
      deep: true,
    }
);
onMounted(() => {
  queryList();
});
</script>

<style lang="less" scoped>
.page-top {
  position: relative;
  background: linear-gradient(90deg, #004ce4 42%, #0256ff 81%);
  text-align: center;
  padding: 20px 0;

  .title {
    color: #fff;
    font-size: 28px;
    line-height: 40px;
  }

  &::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 0;
    width: 200px;
    height: 80px;
    background: url("/notice-bg.png") no-repeat center;
    background-size: cover;
  }
}

.breadcrumb {
  font-size: 14px;
}

.content-container {
  display: flex;
  flex-direction: column;

  @media (min-width: 768px) {
    flex-direction: row;
  }
}

.left-tabs {
  flex: 0 0 auto;
  width: 100%;
  margin-bottom: 16px;

  @media (min-width: 768px) {
    width: 210px;
    margin-bottom: 0;
  }
}

.left-tabs-pane {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  cursor: pointer;
  border-bottom: 1px solid #e5e8ed;
  transition: background 0.3s;

  &.is-active {
    background: #fff;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 3px;
      background: #004ce4;
    }
  }

  .tab-label {
    font-size: 16px;
  }

  .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #ebebeb;
    font-size: 12px;
  }
}

.card-container {
  background: #fff;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.pagination {
  text-align: right;
  font-size: 14px;
}


@media (max-width: 768px) {
  .page-top .title {
    font-size: 24px;
    line-height: 36px;
  }

  .left-tabs {
    width: 100%;
    margin-bottom: 16px;
  }

  .left-tabs-pane {
    padding: 0 10px;
  }

  .card-container {
    margin-bottom: 12px;
  }

  .pagination {
    font-size: 12px;
  }
}
</style>

